<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="visible = $event"
    title="写评价"
    width="600px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="80px"
      label-position="left"
    >
      <el-form-item label="评分" prop="rating">
        <el-rate
          v-model="formData.rating"
          :max="5"
          show-text
          :texts="['极差', '失望', '一般', '满意', '惊喜']"
          text-color="#ff9900"
        />
      </el-form-item>
      
      <el-form-item label="评价内容" prop="content">
        <el-input
          v-model="formData.content"
          type="textarea"
          :rows="6"
          placeholder="请分享您对这家企业的真实感受，包括工作环境、团队氛围、发展机会等方面的体验..."
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="匿名评价">
        <el-switch
          v-model="formData.isAnonymous"
          active-text="匿名"
          inactive-text="实名"
        />
        <div class="anonymous-tip">
          <el-icon><InfoFilled /></el-icon>
          <span>选择匿名评价将不会显示您的真实姓名</span>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">提交评价</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import { createReview } from '@/api/enterprise'
import useStore from '@/store'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  enterpriseId: {
    type: [String, Number],
    required: true
  }
})

const emit = defineEmits(['update:visible', 'success'])

const store = useStore()
const formRef = ref()
const loading = ref(false)

// 表单数据
const formData = reactive({
  rating: 5,
  content: '',
  isAnonymous: false,
  userName: ''
})

// 表单验证规则
const formRules = {
  rating: [
    { required: true, message: '请选择评分', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入评价内容', trigger: 'blur' },
    { min: 10, message: '评价内容至少需要10个字符', trigger: 'blur' },
    { max: 500, message: '评价内容不能超过500个字符', trigger: 'blur' }
  ]
}

// 监听对话框显示状态，重置表单
watch(() => props.visible, (newVal) => {
  if (newVal) {
    initForm()
  }
})

// 初始化表单
const initForm = () => {
  formData.rating = 5
  formData.content = ''
  formData.isAnonymous = false
  // 从store获取当前登录用户名
  formData.userName = store.app.username || '匿名用户'
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}

// 提交评价
const handleSubmit = async () => {
  try {
    // 验证表单
    await formRef.value?.validate?.()
    
    // 检查用户是否登录
    if (!store.app.userId || !store.app.token) {
      ElMessage.error('请先登录后再提交评价')
      return
    }
    
    loading.value = true

    const submitData = {
      enterpriseId: Number(props.enterpriseId), // 确保是数字类型
      userId: Number(store.app.userId), // 从store获取真实用户ID
      userName: formData.isAnonymous ? '匿名用户' : (formData.userName || store.app.username || '匿名用户'),
      content: formData.content.trim(),
      rating: Number(formData.rating)
    }

    console.log('提交评价数据:', submitData)
    console.log('API端点: POST /reviews')
    
    const response = await createReview(submitData)
    
    console.log('评价提交成功，响应:', response)
    
    if (response.code === 0) {
      ElMessage.success('评价提交成功！')
      emit('success', response.data || response)
      handleClose()
    } else {
      ElMessage.error(response.msg || '提交失败，请重试')
    }
  } catch (error) {
    console.error('提交评价失败:', error)
    console.error('错误详情:', error.response)
    const errorMessage = error.response?.data?.msg || error.response?.data?.message || error.message || '提交失败，请重试'
    ElMessage.error(errorMessage)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.anonymous-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #666;
  font-size: 12px;
}

.anonymous-tip .el-icon {
  color: #409eff;
}

/* 评分组件样式优化 */
:deep(.el-rate) {
  margin-top: 8px;
}

:deep(.el-rate__text) {
  margin-left: 12px;
  font-size: 14px;
  color: #666;
}

/* 文本域样式优化 */
:deep(.el-textarea__inner) {
  resize: vertical;
  min-height: 120px;
}

/* 字数统计样式 */
:deep(.el-input__count) {
  background: transparent;
  color: #999;
}
</style>


















































